<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="file" id="file" name="img">
    <img src="" alt="">
    <button>提交</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        let formdata = new FormData();
        // 声明一个容器 放图片
        $("#file").change(function () {

            console.log(this.files);
            formdata.append("img",this.files[0]);
            let fd = new FileReader();

            fd.readAsDataURL(this.files[0]);

            fd.onload = function () {
                console.log(this.result);
                $("img").attr("src",this.result)
            }

        })
        $("button").click(function(){
            $.ajax({
                url:"/upload",
                type:'POST',
                data:formdata,
                processData: false, //必须 缓存关了
                contentType: false, //必须 关闭 设置 数据格式（以 数据本身格式为准 xxxxx urlencoded）
                dataType:'json',
                success:function(res){
                    console.log(res)
                }
            })
        })

        
    </script>
</body>

</html>